<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>cart.html</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <link rel="stylesheet" href="./css/index.css">
    <style>
        #root {
            padding: 10px;
        }

        .commodity_list {
            display: flex;
            flex-direction: column;
            gap: 10px;
            justify-content: center;
        }

        .commodity_list > li {
            border: 1px solid #e0e0e0;
        }

        .commodity {
            width: 100%;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .commodity li {
            text-align: center;
        }

        .commodity li:first-child {
            width: 5%;
            min-width: max-content;
        }

        input[type="checkbox"] {
        }

        .commodity li:nth-child(2) {
            width: 100px;
        }

        .commodity li {
            padding: 10px;
            width: 20%;
        }

        .commodity li:last-child {
            flex: 1;
        }


        .commodity li:last-child button {
            border: none;
            width: 100%;
            max-width: 120px;
            min-width: max-content;
            padding: 15px 10px;
            background: #e72525;
            color: white;
            box-shadow: 0 0 3px 1px #881d1d;
            cursor: pointer;
        }

        .commodity li:last-child button:hover {
            box-shadow: none;
        }

        .commodity li:last-child button:active {
            box-shadow: 0 0 5px 2px #881d1d inset;
        }

        img {
            width: 100%;
        }

        .footer {
            margin-top: 20px;
            padding: 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .footer button {
            border: none;
            padding: 15px 60px;
            background: #d51b1b;
            color: white;
            box-shadow: 0 0 3px 1px #881d1d;
            cursor: pointer;
        }

        .footer button:hover {
            box-shadow: none;
        }

        .footer button:active {
            box-shadow: 0 0 5px 2px #881d1d inset;
        }

    </style>
</head>
<body>
<div id="root">
    <div>
        <ul class="commodity_list">
            <li v-if="commodity">
                <ul class="commodity">
                    <li><input class="select" name="select" @click="select(0,0,$event.target)" data-all="true"
                               type="checkbox"></li>
                    <li><p>商品图片</p></li>
                    <li><p>商品名称</p></li>
                    <li><p>商品数量</p></li>
                    <li><p>单价</p></li>
                    <li><p>操作</p></li>
                </ul>
            </li>
            <li v-for="list in commodity">
                <ul class="commodity">
                    <li><input @click="select(list.price, list.number, $event.target)" class="select" name="select"
                               type="checkbox">
                    </li>
                    <li><img :src="list.src" alt=""></li>
                    <li><p>{{ list.name }}</p></li>
                    <li><p>{{ list.number }}个</p></li>
                    <li><p>￥{{ list.price }}</p></li>
                    <li>
                        <button>删除</button>
                    </li>
                </ul>
            </li>
        </ul>
        <div class="footer">
            <span>总金额：{{ total_prices }}元</span>
            <button>结算</button>
        </div>
    </div>
</div>
<script>
    let vm = new Vue({
        el: "#root",
        data() {
            return {
                commodity: JSON.parse(localStorage.getItem('commodity')), // 添加到购物车的物品
                total_prices: 0,
            }
        },
        methods: {
            select(price, number, e) {
                const p_select = document.getElementsByClassName('select')
                if (e.dataset['all']) {
                    this.checkAll()
                    if (e.checked) {
                        const that = this
                        that.commodity.forEach((e) => {
                            that.total_prices += e.price * e.number
                        })
                    } else {
                        this.total_prices = 0
                    }
                    return
                }

                if (e.checked)
                    this.total_prices += price * number
                else
                    this.total_prices -= price * number
                p_select[0].checked = this.ifCheckAll(p_select, 1);
            },
            checkAll() {
                const p_select = document.getElementsByClassName('select')
                for (let i = 1; i < p_select.length; i++) {
                    p_select[i].checked = p_select[0].checked
                }
            },
            ifCheckAll(arrEle, index) {
                for (let i = index; i < arrEle.length; i++) {
                    if (!arrEle[i].checked)
                        return false
                }
                return true
            },


        },
        created() {
            const that = this;
            (function (p) { // 将本地存储中购物车的数量添加给 commodity
                that.commodity.forEach((e) => {
                    p.forEach((eP) => {
                        if (e.id === eP.id) {
                            e.number = eP.number
                        }
                    })
                })
            })(JSON.parse(localStorage.getItem('p'))) // 添加到购物车的物品数量

        },
        mounted() {
            const that = this;


        },
    })
</script>

</body>
</html>